<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/js.cookie.js"></script>
    <style>
        a{
            text-decoration: none;
        }
        table,thead,tbody,tr,th,td{
            border: 2px solid blue;
            border-collapse: collapse;
        }
        table{
            width: 600px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>金额</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tab"></tbody>
    </table>
    <script>
        var oTab=document.querySelector("#tab");
        var oCarts=JSON.parse(Cookies.get("carts")||'[]');
        var strHtml="";

        oCarts.forEach(function(item,index){
            strHtml+=`
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.price}</td>
                    <td>${item.number}</td>
                    
                    <td>${item.price*item.number}</td>
                    <td><a class="del" data-id=${item.id} href="javascript:void(0)">删除</a></td>
                </tr>
            `
        });
        oTab.innerHTML=strHtml;

        // 委托
        oTab.addEventListener("click",function(evt){
            var e=evt||window.event;
            var ele=e.target||e.srcElement;
            if(!(ele.nodeName=="A"&&ele.className=="del")){
                return;
            }
            // 找到id,根据id删除数据
            var id=ele.getAttribute("data-id");
            oCarts.forEach(function(item,index){
                if(item.id==id){
                    oCarts.splice(index,1);
                }
            });
            // 覆盖磁盘上的数据
            Cookies.set("carts",oCarts);
            ele.parentNode.parentNode.remove();
        });
    </script>
</body>
</html>